<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

  </head>
  <body>
    <style>
        body {
          background-color: #000;
        }
      
        a.button {
          display: block;
          width: 160px;
          height: 50px;
          background-color: #333;
          text-align: center;
          line-height: 50px;
          text-decoration: none;
          color: #666;
          font-weight: bold;
          border-radius: 5px;
          overflow: hidden;
          position: relative; /* 相对定位 */
        }
        a.button:hover {
          color: yellow;
        }
        a.button::before {
          content: "";
          display: block;
          width: 300px;
          height: 300px;
          background-image: radial-gradient(yellow, transparent 40%);
          position: absolute;
          /* left: 0px;
              top: 0px; */
          left: var(
            --left
          ); /* 使用自定义属性 --left 来控制彩色毛毛球的位置（水平方向）*/
          top: var(
            --top
          ); /* 使用自定义属性 --top 来控制彩色毛毛球的位置（垂直方向）*/
          margin-left: -150px;
          margin-top: -150px;
          display: none;
        }
        a.button:hover::before {
          display: block; /* 鼠标移入时显示彩色毛毛球 */
        }
      
        a.button::after {
          content: "";
          display: block;
          position: absolute; /* 绝对定位 */
          left: 2px;
          right: 2px;
          top: 2px;
          bottom: 2px;
          background-color: #333;
          border-radius: 5px;
        }
        .m-center {
          margin: 50px auto;
        }
        a.button span {
          position: relative; /* 相对定位 */
          z-index: 1; /* z-index: 1; 提高层级，确保文字在最上层显示 */
        }
      </style>
      
      <a href="#" class="button m-center">
        <span>百度一下</span>
      </a>
  </body>

  <script>
    // 获取所有按扭
    const button = document.querySelector("a.button");
    // 遍历按扭，给每个按扭添加鼠标移入事件监听器

    button.onmousemove = function (e) {
      const pageX = e.pageX; // 获取鼠标与浏览器左边距离
      const pageY = e.pageY; // 获取鼠标与浏览器顶部距离
      const left = this.offsetLeft; // 获取按扭距离浏览器左边距离
      const top = this.offsetTop; // 获取按扭距离浏览器左边距离

      // 计算得到 鼠标相对于按扭左边和上边距离
      const x = pageX - left;
      const y = pageY - top;

      // 给伪元素设置自定义属性 --left 和 --top，用来控制彩色毛毛球的位置
      this.style.setProperty("--left", x + "px");
      this.style.setProperty("--top", y + "px");

      // 注意这一步，要将  button::before css 选择器的 中的 top 和 left 修改为
      // top:var(--top);  left:var(--left);
    };
  </script>
</html>


